<template>
	<eui-page-frame topHeight="170"  bottomHeight="96">
		<template #top>
			<view class="content-img">
				<eui-nav-bar title="详情" color="#000000" />
			</view>
		</template>
		<eui-page-content>
			<eui-base-card title="洽谈意向">
				<eui-detail-show :items="dataItems" v-model="dataModel" size="normal" labelWidth="60px"></eui-detail-show>
			</eui-base-card>
			<eui-base-card title="核心条款">
				<view v-if="feeData.length>0" v-for="(item,index) in feeData" :key="index" class="fee-data">
					<view class="m-title-text" >{{ item.c_article_name }}</view>
					<!-- <view style="display: flex;justify-content: space-between; width:65%;">
						
						
					</view> -->
					<view class="m-caid-amount-unit">
						<view class="amount-value">{{item.c_amount}}</view>
						<view class="unit-value">{{unitList.find(x=>x.value===item.c_unit)?.text}}</view>
					</view>
					<view class="bz-value">{{item.c_value}}，{{item.c_min}}-{{item.c_max}}</view>
				</view>
				<view v-else>
					<image src="@/static/img/no_data.png" mode="aspectFit" class="image-min" />
					<view class="no-data-text">暂无数据</view>
				</view>
			</eui-base-card>
			<eui-base-card title="招商计划">
				<eui-detail-show :items="dataPlanItems" v-model="planData" size="normal"></eui-detail-show>
			</eui-base-card>
			<eui-base-card title="洽谈进程">
				<eui-detail-show :items="dataProgressItems" v-model="dataModel" size="normal"></eui-detail-show>
				<view style="margin-left: -16rpx;">
				<eui-steps :options="talkProgress" :active="active" type="plan" :themeColor="themeColor">
					<template v-slot:content="scope" style="margin-top: 16rpx;">
						<view class="progress-item-content" v-if="scope.content">
							<view style="color: #666666;">{{ scope.content }}</view>
							<view style="display: flex; margin-top: 20rpx;" v-if="scope.c_process_name">
								<eui-tag :text="scope.c_process_name" plain plainFill :bgColor="themeColor"
									:color="themeColor" :borderColor="themeColor"></eui-tag>
							</view>
						</view>
					</template>
				</eui-steps>
				</view>
			</eui-base-card>
		</eui-page-content>
		<template #bottom>
			<view class="bt-button">
				<eui-button :disabled="dataModel.c_status !=='3'" type="primary" title="推意向" @click="submit" />
			</view>
		</template>
	</eui-page-frame>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue'
	import dayjs from 'dayjs';
	import { onLoad } from "@dcloudio/uni-app";
	import { getRelatedName, getDictName, getDictSelectList } from '../components/RelatedName.js';
	import useService from '@/hooks/useService';
    import { useMainStore } from '../../../store/modules/store';
	const service = useService({ prefix: "apiApi" });
	const billId = ref('');
	const mainStore = useMainStore();
	const { loginInfo } = mainStore;
	// const providerType = getDictList('供应商类别')
	// console.log('供应商类别',providerType)
	//取字典数据
	const unitList = getDictSelectList('招商标准定义标准值单位');
	const dataItems = [
		{
			label: "负责部门",
			prop: "c_adname",
			type: "text",
			colSpan: 12,
			element: {
			},
		},
		{
			label: "负责人",
			prop: "c_talk_name",
			type: "text",
			colSpan: 12,
			element: {
			},
		},
		{
			label: "意向商户",
			prop: "c_provider_name",
			type: "text",
			element: {
			},
		},
		{
			label: "商户类别",
			prop: "c_category_name",
			type: "text",
			colSpan: 12,
			element: {
			},
		},
		{
			label: "经营方式",
			prop: "c_con_type_name",
			type: "text",
			colSpan: 12,
			element: {
			},
		},
		{
			label: "品牌",
			prop: "c_bname",
			type: "text",
			element: {
			},
		},
		{
			label: "意向铺位",
			prop: "c_counter_name",
			type: "text",
			element: {
			},
		},
		{
			label: "经营面积",
			prop: "c_area_text",
			type: "text",
			element: {
			},
		},
	]
	const dataModel = ref({});
	const planData = ref({})
	const feeData = ref([])
	const talkProgress = ref([]);
	const themeColor = ref('#02B7E6');
	const active = ref(0);
	const dataPlanItems = ref([])

	const dataProgressItems = [
		{
			label: "规划业态",
			prop: "c_counter_cname",
			type: "text",
			colSpan: 12,
			element: {
			},
		},
		{
			label: "品牌品类",
			prop: "c_ccname",
			type: "text",
			colSpan: 12,
			element: {
			},
		},
		{
			label: "洽谈对象",
			prop: "c_provider_name",
			type: "text",
			colSpan: 12,
			element: {
			},
		},
		{
			label: "洽谈人",
			prop: "c_talk_name",
			type: "text",
			colSpan: 12,
			element: {
			},
		},
	]
	onLoad(async ({ c_id }) => {
		billId.value = c_id;
		await getBillDetail();
		await GetCounterPlanData()
	})
	const getBillDetail = async () => {
		const req = {
			BillId: billId.value
		};
		dataModel.value = {};
		talkProgress.value = [];
		feeData.value = [];
		uni.showLoading({ title: "查询中...", mask: true });
		const res = await service.request('管易通洽谈记录登记单', 'EnjoyBillQuery', req);
		uni.hideLoading();
		if (res) {
			dataModel.value = res.ds[0];
			dataModel.value.c_area_text = res.ds[0].c_area!=null? res.ds[0].c_area+'m²':'';
			dataModel.value.c_adname = getRelatedName('rdsDeparts', dataModel.value.c_adno) || '';
			dataModel.value.c_counter_name = getRelatedName('rdsCounter', dataModel.value.c_counter_no) || '';
			dataModel.value.c_category_name = getDictName('供应商类别', dataModel.value.c_category) || '';
			dataModel.value.c_con_type_name = getDictName('经营方式', dataModel.value.c_con_type) || '';
			dataModel.value.c_ccname = getRelatedName('rdsGdsclasses', dataModel.value.c_ccode) || '';
			dataModel.value.c_counter_cname = getRelatedName('rdsGdsclasses', dataModel.value.c_counter_ccode) || '';
			feeData.value = res.ds1;
			talkProgress.value = res.ds4.sort(sortBy("c_times")).map(x => {
				return {
					title: dayjs(x.c_talk_dt).format('YYYY-MM-DD'),
					text: `第${res.ds4.findIndex(y => y.c_id === x.c_id) + 1}次沟通`,
					content: x.c_talk_memo || '',
					c_process_name: x.c_process_name || ''
				}
			})
			active.value = talkProgress.value.length - 1;
		}
	}
	const sortBy = (props) => {
		return function (a, b) {
			return a[props] - b[props];
		}
	}
	const GetCounterPlanData = async () => {
		const req = {
			WhereList: [
				{ c_col: "storeId", c_oper: "等于", c_value: dataModel.value.c_store_id, c_logic: "而且" },
				{ c_col: "counter", c_oper: "等于", c_value: dataModel.value.c_counter_no, c_logic: "而且" },
			]
		}
		planData.value = {};
		dataPlanItems.value = [{
			label: "意向品类",
			prop: "c_ccname",
			type: "text",
			colSpan: 24,
			element: {
			},
		}]
		const res = await service.request('管易通洽谈记录登记单', 'GetCounterPlanData', req);
		if (res) {
			const item = res.ds[0];
			const item2 = res.ds1;
			for (let i = 0; i < item2.length; i++) {
				dataPlanItems.value.push({
					label: '计划' + item2[i].c_proc_name,
					prop: 'c_plan_edt' + i,
					type: "text",
					colSpan: 24,
					element: {
					},
				});
				planData.value['c_plan_edt' + i] = item2[i].c_plan_edt ? dayjs(item2[i].c_plan_edt).format('YYYY-MM-DD') : '';
				if (!item2[i].c_fact_edt) {
					if (dayjs(item2[i].c_plan_edt).isAfter(new Date())) {
						planData.value['c_fact_edt' + i] = '';
						dataPlanItems.value.push({
							label: '实际' + item2[i].c_proc_name,
							prop: 'c_fact_edt' + i,
							type: "text",
							colSpan: 24,
							element: {
							},
						});
					}
					else {
						dataPlanItems.value.push(
							{
								label: '实际' + item2[i].c_proc_name,
								prop: 'c_fact_edt' + i,
								type: "tag",
								colSpan: 24,
								element: {
									size: "mini",
									shape: "circle",
									bgColor: 'linear-gradient( 90deg, rgba(255,64,0,0.8) 0%, #FF4000 100%)',
									borderRadius: '16rpx 0rpx 16rpx 0rpx',
									showBorder: false,
									plain: false,
									plainFill: true
								},
							}
						)
						planData.value['c_fact_edt' + i] = '已延期';
					}
				}
				else {
					dataPlanItems.value.push({
						label: '实际' + item2[i].c_proc_name,
						prop: 'c_fact_edt' + i,
						type: "text",
						colSpan: 24,
						element: {
						},
					});
					planData.value['c_fact_edt' + i] = dayjs(item2[i].c_fact_edt).format('YYYY-MM-DD');
				}


			}
			dataPlanItems.value.push({
				label: "负责部门",
				prop: "c_charge_adname",
				type: "text",
				colSpan: 12,
				element: {
				},
			},
				{
					label: "负责人",
					prop: "c_charge_username",
					type: "text",
					colSpan: 12,
					element: {
					},
				})
			planData.value.c_ccode = item?.c_ccode || '';
			planData.value.c_ccname = getRelatedName('rdsGdsclasses', planData.value.c_ccode) || '';
			planData.value.c_adno = item?.c_adno || '';
			planData.value.c_charge_adname = getRelatedName('rdsDeparts', planData.value.c_adno) || '';
			planData.value.c_charge_userno = item?.c_charge_userno || '';
			planData.value.c_charge_username = getRelatedName('rdsUsers', planData.value.c_charge_userno) || '';
		}
	}
	
	const submit = async()=>{
		if (dataModel.value.c_status === '3') {
			await genIntentionBillinfo(dataModel.value);
		}
		else {
			uni.showToast({
				duration: 2000,
				icon: 'none',
				title: '单据不为已审核，无法推意向',
				mask: true,
			});
			return;
		}
	}
	
	//生成意向申请单-检查
	const HasGenItentionBill = async (item) => {
		const req = {
			billId: item.c_id,
			billType: item.c_bill_type
		};
		const res = await service.request('管易通洽谈记录登记单', 'HasGenItentionBill', req);
		if (res) {
			return res;
		}
	}
	//生成意向申请单
	const genIntentionBillinfo = async (item) => {
		const checkResult = await HasGenItentionBill(item);
		//console.log('checkResult',checkResult)
		
		if (checkResult?.length > 0) {
			const ibills = checkResult.map(x => x.c_id);
			uni.showToast({
				duration: 2000,
				icon: 'none',
				title: `当前单据[${item.c_id}]已经生成意向申请单[${ibills}]，请确认`,
				mask: true,
			});
			return;
		}
	
		const req = {
			billId: item.c_id,
			billType: item.c_bill_type,
			userNo: loginInfo.sUser,
			loginStoreId: loginInfo.sUserStore
		};
		const res = await service.request('管易通洽谈记录登记单', 'GenItentionBill', req);
		if (res) {
			uni.showModal({
				title: '提示',
				content: `推送成功，已经生成意向申请单[${res}]`,
				showCancel: false,
				success: (res) => {
					if (res.confirm) {
						getBillDetail();
						GetCounterPlanData()
					} else {
					}
				}
			});		
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex: 1;
		flex-direction: column;
		background-color: #F2F2F2;
		padding: 0px !important
	}

	.content-img {
		background-color: #FFFFFF;
		background-size: 100% 420rpx;
		background-repeat: no-repeat;
		width: 100%;
	}

	.navigation {
		flex: 0 0 auto;
		margin-bottom: 5px;
	}

	.m-card-input-view {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		//width: 50%;
		background: #FFFFFF;
		padding: 16rpx 0rpx 16rpx 18rpx;
		box-sizing: border-box;
	}

	// 左侧标题
	.m-card-input-title {
		//width: 150rpx;
		min-height: 40rpx;
	}

	.m-title-text {
		font-size: 28rpx;
		font-family: 'PingFangSC-Regular', 'sans-serif', 'SourceHanSansCN-Regular', 'SourceHanSansCN', 'Times New Roman', 'Georgia', 'serif';
		font-weight: 400;
		color: #666666;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		width: 40%;
	}
	.m-caid-amount-unit{
		display: flex;
		align-items: center;
		width: 30%;
		margin-left: 8rpx;
	}
	// 右侧内容
	.m-card-input-content {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		position: relative;
	}

	// 单行输入框
	.m-input-input {
		flex: 1;
		line-height: 40rpx;
		min-height: 60rpx;
		background-color: #F9F9F8;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 28rpx;
		color: #000000;
		margin-left: 20rpx;
		border-radius: 10rpx;
	}

	.fee-data {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		align-items: center;
		// margin-bottom: 40rpx;
		padding:18rpx 0rpx;
	}

	.fee-grid-item {
		display: flex;
		align-items: center;
	}

	.amount-value {
		text-align: right;
		font-size: 28rpx;
		line-height: 37rpx;
		width: 50%;
	}

	.unit-value {
		margin-left: 4rpx;
		font-size: 28rpx;
		line-height: 37rpx;
		text-align: left;
		color: #888888;
		width: 50%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.bz-value {
		margin-left: 20rpx;
		color: #02B7E6;
		font-size: 28rpx;
		text-align: right;
		width: 30%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.progress-item-content{
		background: #F9FAFC; 
		border-radius: 10rpx;
		margin-top: 16rpx;
		padding: 20rpx;
		font-size: 26rpx; 
	}
	.bt-button {
		background-color: #FFFFFF;
		padding: 10rpx 0rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.image-min {
		width: 100%;
		height: 150rpx;
		opacity: 0.6;
		margin-top:-40rpx;
	}
	.no-data-text{
		text-align: center;
		color: #cccccc;
		font-size:26rpx;
		margin-top:-20rpx;
	}
	.image-bottom{
		margin-bottom:40rpx;
	}
</style>